<template>
  <div class="banner">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in banners" key="index" index="index" item="item">
        <a @click="skip(item.skipUrl)">
          <img :src="item.picUrl" alt="">
        </a>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    props: {
      banners: null
    },
    methods: {
      skip (url) {
        this.$router.push({
          path: url
        })
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .banner {
    height: 1.8rem;
    background: #b2b2b2;
    > div {
      height: 100%;
    }
    a {
      display: block;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
